<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../Vue.js/vue.js"></script>
</head>
<body>
    <!-- 收集表单数据：
        <input type="text"> v-model收集的是value的值，即用户输入的值 （password， textarea等用户直接输入信息的文本框都可取得信息）
        <input type="radio"> v-model默认收集的是选项是否被选中的布尔值，若要收集信息，则需要自行设置value的值
        v-model的三个修饰符： 
        lazy: 失去焦点时再收集数据到后台，而非实时收集
        number： 将字符串数据转换为number数据
        trim: 删除字符串前后的空格 -->
        
    <div class="root">
        <form action="" @submit.prevent="submit">
            <label for="t1">账号：</label>
            <input type="text" id="t1" v-model.trim="account"><br/><br/>
            <label for="t2">密码：</label>
            <input type="password" id="t2" v-model="password"><br/><br/>
            <label for="t3">年龄：</label>
            <input type="number" id="t3" v-model.number="age"><br/><br/>
            性别： 男<input type="radio" name = "sex" value="man" v-model="sex"> 女<input type="radio" name = "sex" value="woman" v-model="sex"><br/><br/>
            爱好： 
            学习<input type="checkbox" value="study">
            吃饭<input type="checkbox" value="eat">
            男女<input type="checkbox" value="bg"><br/><br/>
            所属校区： 
            <select v-model = "city">
                <option value="">请选择</option>
                <option value="bj">北京</option>
                <option value="sh">上海</option>
                <option value="sz">深圳</option>
            </select><br/><br/>
            其他信息： <textarea name="" id="" cols="30" rows="10" v-model.lazy="order"></textarea><br/><br/>
            <input type="checkbox" v-model="agree"> 阅读并接受: <a href="http://www.baidu.com">《用户协议》</a><br/><br/>
            <button>提交</button>
            <button>删除</button>
        </form>
    </div>
</body>
<script>
    const vm = new Vue({
        el: ".root",
        data: {
            account: "",
            password: "", 
            age:"", 
            sex: "man",
            order: "",
            //多组多选框，若只有一个字符串/布尔值属性，则只收集布尔值属性
            hobby: [],
            city: "bj",
            agree: false
        },
        methods: {
            submit(){
                console.log(JSON.stringify(this._data));
            }
        }
    })
</script>
</html>